<template>
  <!--  <Initial_maintenance_inspection_report/>
    <Repair_and_Disassembly_Report/>-->
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
  >
    <el-sub-menu index="1">
      <template #title><span style="font-weight: bold;font-size: 20px">功能</span></template>
      <el-menu-item style="display: flex; justify-content: center; align-items: center;width: 75px"
                    @click="frontDesk()"><span style="font-weight: bold;font-size: 15px">管理员</span></el-menu-item>
      <el-menu-item style="display: flex; justify-content: center; align-items: center;width: 75px"
                    @click="TFValueReturn()"><span style="font-weight: bold;font-size: 15px">工序选择</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
  <div style="display: flex;justify-content: center;align-items: center">
    <div v-show="TFValue" class="common-layout" style="width: 1000px;">
      <div style="height: 600px;display: flex;justify-content: center;align-items: center">
        <el-container>
          <el-main>
            <el-button class="butClass" type="info"
                       @click="effect('1')" plain>干泵初检
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('2')" plain>干泵拆解
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('3')" plain>干泵清洗
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('4')" plain>严损判断
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('5')" plain>罗氏干泵装配
            </el-button>
            <br>
            <el-button class="butClass" type="info"
                       @click="effect('6')" plain>多级干泵装配
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('7')" plain>吊装
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('8')" plain>机组装配记录
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('9')" plain>机组电控系统检验
            </el-button>
            <el-button class="butClass" type="info"
                       @click="effect('10')" plain>出厂测试报告
            </el-button>
            <!--            <div>
                          &lt;!&ndash; 分页组件 &ndash;&gt;
                          &lt;!&ndash;    <el-pagination
                                  size="small"
                                  layout="prev, pager, next"
                                  :total="total"
                                  :page-size="1"
                                  background
                                  :current-page="currentPage"
                                  @current-change="handleCurrentChange"
                              />&ndash;&gt;
                          &lt;!&ndash; 根据当前页码显示相应的组件 &ndash;&gt;
                          <div v-if="currentPage === 1">
                            <Initial_maintenance_inspection_report/>
                          </div>
                          <div v-else-if="currentPage === 2">
                            <Repair_and_Disassembly_Report/>
                          </div>
                          <div v-else-if="currentPage === 3">
                            <Pump_maintenance_and_disassembly_report/>
                          </div>
                          <div v-else-if="currentPage === 4">
                            <Serious_damage_and_quality_assessment/>
                          </div>
                          <div v-else-if="currentPage === 5">
                            <Assembly_record_of_dry_pump/>
                          </div>
                          <div v-else-if="currentPage === 6">
                            <Multistage_dry_pump_assembly_records/>
                          </div>
                          <div v-else-if="currentPage === 7">
                            <Hoisting_pump/>
                          </div>
                          <div v-else-if="currentPage === 8">
                            <Dry_pump_unit_assembly_record/>
                          </div>
                          <div v-else-if="currentPage === 9">
                            <Dry_Pump_Unit_Electrical_Control_System_Inspection_Record/>
                          </div>
                          <div v-else-if="currentPage === 10">
                            <Factory_test_report/>
                          </div>
                        </div>-->
          </el-main>
        </el-container>
      </div>
    </div>

    <div v-show="!TFValue" class="common-layout" style="width: 1300px;">
      <div style="display: flex;justify-content: center;align-items: center">
        <el-container>
          <el-main>
            <StaffPaging v-bind:process="process"/>
          </el-main>
        </el-container>
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
/*import Initial_maintenance_inspection_report from './components/Initial_maintenance_inspection_report.vue';
import Repair_and_Disassembly_Report from './components/Repair_and_Disassembly_Report.vue';
import Pump_maintenance_and_disassembly_report from './components/Pump_maintenance_and_disassembly_report.vue'
import Serious_damage_and_quality_assessment from './components/Serious_damage_and_quality_assessment.vue'
import Assembly_record_of_dry_pump from './components/Assembly_record_of_dry_pump.vue'
import Multistage_dry_pump_assembly_records from './components/Multistage_dry_pump_assembly_records.vue'
import Hoisting_pump from './components/Hoisting_pump.vue'
import Dry_pump_unit_assembly_record from './components/Dry_pump_unit_assembly_record.vue'
import Dry_Pump_Unit_Electrical_Control_System_Inspection_Record
  from './components/Dry_Pump_Unit_Electrical_Control_System_Inspection_Record.vue'
import Factory_test_report from './components/Factory_test_report.vue'*/
import StaffPaging from "staff/StaffPaging.vue"
import {ref} from 'vue';

const TFValue = ref(true)

function TFValueReturn() {
  TFValue.value = true
  process.value = null
}

// import {ElPagination} from 'element-plus';
// 定义分页数据
// const total = ref(12); // 总页数，根据你的组件数量来设置
const process = ref(1); // 当前工序
/*
// 页码改变时的事件处理
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
*/
const effect = function (serialNumber) {
  process.value = serialNumber
  TFValue.value = false
}

function frontDesk() {
  window.location.href = '../admin/admin.html';
}

</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-menu--popup {
  min-width: 50px !important;
}

.butClass {
  width: 180px;
  margin-bottom: 50px;
  height: 80px;
  font-size: 21px;
}

.el-menu--horizontal {
  mdisplay: flex;
  justify-content: flex-end;
}
</style>
